<template>
  <el-popover placement="bottom"  :visible="isShow" :width="width"  :show-arrow="false" >
    <template #reference>
      <div ref="selectRef" class="w-full flex">
        <el-input @click="showHandler" placeholder="请选择图标" readonly v-model="props.modelValue">
          <template #prepend>
            <BaseIcon :icon="props.modelValue"></BaseIcon>
          </template>
        </el-input>
      </div>
    </template>
    <div class="h-64 flex flex-col">
      <div class="w-full mb-1.5">
        <el-input @input="filtrationHandler" placeholder="请输入图标名" v-model="value">
          <template #append><el-button @click="close">关闭</el-button></template>
        </el-input>
      </div>
      <div ref="containerRef" class="w-full flex-1 height-0 overflow-auto">
        <el-scrollbar >
          <div @click="selectIconHandler(item)" v-for="item in icons" class="inline-flex justify-center items-center cursor-pointer border align-top hover:bg-gray-100" :style="{width: containerWidth/10+'px',height: containerWidth/10+ 'px'}">
            <BaseIcon :icon="item" ></BaseIcon>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </el-popover>
</template>

<script setup lang="ts" >
import {iconList} from './ts/IconData.ts'

import {nextTick, ref} from "vue";
const selectRef = ref()
const containerRef = ref()
const value = ref('')
const props = defineProps({
  modelValue: String,
})
const emit = defineEmits(['update:modelValue'])
const icons = ref([])
const width = ref()
const containerWidth = ref()
const isShow = ref(false)
const showHandler = () => {
  icons.value = iconList
  width.value = selectRef.value.clientWidth
  isShow.value = true
  nextTick(() => {
    containerWidth.value = containerRef.value.clientWidth
  })
}
const close = () => {
  value.value = ''
  isShow.value = false
}
const filtrationHandler = (value)=>{
  if(!value){
    icons.value = iconList
  }else{
    icons.value = iconList.filter(res=> res.indexOf(value) != -1)
  }

}
const selectIconHandler = (icon) => {
  emit("update:modelValue",icon)
}
</script>

<style scoped>

</style>